<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
<div class="nav">
    五子棋对战
</div>

<div class = "container">
    <div>
        <!-- 展示用户信息 -->
        <div id = "screen"></div>
        <div id = "match-button">开始匹配</div>
    </div>
</div>

<script src = "js/jquery.min.js"></script>
<script>
    $.ajax({
        type: 'get',
        url: '/user/getUserInfo',
        success: function (body) {
            let screenDiv = document.querySelector('#screen');
            screenDiv.innerHTML = '昵称：' + body.userName + '<br>'
            + '积分：' + body.score + '<br>'
            + '比赛场次：' + body.totalCount + '<br>'
            + '获胜场数：' + body.winCount
        },
        error: function () {
            alert("获取用户信息失败！");
        }
    });

    // 初始化 websocket，并且实现前端匹配逻辑
    let websocketUrl = 'ws://' + location.host + '/findMatch'
    let websocket = new WebSocket(websocketUrl);
    websocket.onopen = function () {
        console.log("onopen");
    }
    websocket.onclose = function () {
        console.log("onclose");
    }
    websocket.onerror = function () {
        console.log("onerror");
    }
    // 监听页面关闭事件，在页面关闭前手动调用这里 websocket 的 close 方法
    window.onbeforeunload = function () {
        websocket.close();
    }

    // 处理服务器返回的响应
    //响应与 "开始匹配"和 "结束匹配" 相匹配
    websocket.onmessage = function (e) {
        //解析得到的响应对象，返回的数据是 JSON 字符串，将其解析为 js 对象
        let resp = JSON.parse(e.data);
        let matchButton = document.querySelector('#match-button');
        // 一开始约定如果响应成功，那么 JSON 中的 ok 字段就为 true
        if(!resp.ok) {
            console.log("游戏大厅接收到失败响应 " + resp.reason);
            return;
        }
        if (resp.message == 'startMatch') {
            // 开始匹配请求发送成功
            console.log("进入匹配队列成功");
            // 修改按钮中的文本内容
            matchButton.innerHTML = '匹配中（点击停止）'
        } else if (resp.message == 'stopMatch') {
            //结束匹配请求发送成功
            console.log("离开匹配队列成功");
            matchButton.innerHTML = '开始匹配';
        } else if (resp.message == 'matchSuccess') {
            // 匹配到对手
            console.log("匹配到对手，进入游戏房间");
            location.replace("/game_room.html");
        } else if (resp.message == 'repeatConnection') {
            alert("检测到多开，请使用其他账号登录");
            location.replace("/login.html");
        } else {
            console.log("收到非法响应！message = " + resp.message);
        }
    }

    // 给匹配按钮添加一个点击事件
    let matchButton = document.querySelector('#match-button');
    matchButton.onclick = function () {
        // 在触发 websocket 请求之前，先确认一下 websocket 的连接是否正常
        if(websocket.readyState == websocket.OPEN) {
            // 如果当前 readyState 处于 OPEN 状态，说明连接正常
            //这里发送的数据有两种可能：开始匹配 or 停止匹配
            if (matchButton.innerHTML == '开始匹配') {
                console.log("开始匹配");
                websocket.send(JSON.stringify({
                    message: 'startMatch',
                }));
            } else if (matchButton.innerHTML == '匹配中（点击停止）') {
                console.log("停止匹配");
                websocket.send(JSON.stringify({
                    message: 'stopMatch',
                }));
            }
        } else {
            // 连接处于异常状态
            alert("当前您的连接已经断开，请重新登录");
            location.replace('/login.html');
        }

    }
</script>

</body>
</html>